<template>
	<div class="gameParamsType" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'><i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>游戏参数类型</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form" style="margin-bottom:40px;">
				<div class="divider2"></div>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:100%" class="demo-form-inline" :inline="true">
						<div class="import">
							<el-form-item label="选择游戏：" :label-width="formLabelWidth">
								<el-select
								  v-model="region" @change='projectsChange'
								  placeholder="请选择游戏" type="success" multiple>
									<el-option
								    v-for="item in projects"
							        :label="item.label"
							        :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item  prop="pname" label="参数名称">
								<el-input v-model="ruleForm.pname"  placeholder="请输入参数名称"></el-input>
							</el-form-item>

							
							<el-form-item label="生效：">
								<el-checkbox v-model="ruleForm.open">是否生效</el-checkbox> 
							</el-form-item>

						</div>

						<el-form-item class="conmit">
							<el-button type="primary" @click="addForm('ruleForm')" size="small" icon="plus">立即添加</el-button>
							<br>
							<span class="warning">（输入搜索条件，留空搜索全部！）</span>
							</el-form-item>

						</el-form>

				<div class="divider2"></div>
				<!-- <div class="gameParamsTypeTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						添加
					</span>
				</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:100%">
					<div class="form-A">
						<div class="form-A-cell">
							<div class="form-A-hed">
								参数名称
							</div>
							<div  class="form-A-hbd t1">
								<el-form-item  prop="pname">
									<template scope="scope">
										<el-input v-model="ruleForm.pname"   placeholder="请输入参数名称"></el-input> 
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								修改
							</div>
							<div class="form-A-hbd">
								<el-form-item>
									<template scope="scope">
										<el-checkbox v-model="ruleForm.open"></el-checkbox>
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								操作
							</div>
							<div class="form-A-hbd" >
								<el-form-item>
									<template scope="scope">
										<el-button type="primary" @click="addForm('ruleForm', scope.row)" size="small" icon="plus">立即添加</el-button>
									</template>
								</el-form-item>
							</div>

						</div>
						
					</div>
				</el-form> -->
			</div>

			<div class="table">
                <div class="gameParamsTypeTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						结果展示
					</span>
				</div>
				<el-table
					:data="tableData"
					border 
					style="width: 100%"
					:default-sort = "{prop: 'id', order: 'descending'}"
					>
					<el-table-column align="center"
					  label="游戏名称">
						<template scope="scope">
							<el-tag>{{ scope.row.gameName }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="参数ID">
						<template scope="scope">
							<span>{{scope.row.id}}</span>
						</template>
					</el-table-column>
					<el-table-column 
						align="center"
					  	label="参数名称"
						prop="name"
						>
						<template scope="scope">
							<el-input  v-model="scope.row.name" placeholder="请输入内容" ></el-input>
							</template>						
						</el-table-column>
					<el-table-column 
						align="center"
						prop="open"
					  	label="生效"
						>
						<template scope="scope">
							 <el-checkbox v-model="scope.row.open"></el-checkbox>
							</template>
						</el-table-column>
					<el-table-column 
						label="操作"
						align="center" 
						width="300"
						>
						<template scope="scope">
							<el-button 
					      		size="small"
					      		@click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button
					      		size="small"
								type="danger"
					      		@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="pageSizes"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal">
						</el-pagination>
					</div>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./gameParamsType.styl"></style>
<script src="./gameParamsType.js"></script>